<template>
  <div>
    <el-dialog title="清单详情" :visible.sync="dialogFormVisible"
    width='70%' >
      <div class="des-top">
        <el-row :gutter="20" class="first">
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>清单名称</div>
              </el-col>
              <el-col :span='12'><span>{{detail.name}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>采购单号</div>
              </el-col>
              <el-col :span='12'><span>{{detail.id}}</span></el-col>
            </el-row>
          </el-col>

          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>简介</div>
              </el-col>
              <el-col :span='12'><span>{{detail.synopsis}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>采购地址</div>
              </el-col>
              <el-col :span='12'><span>{{detail.province}}{{detail.city}}{{detail.area}}{{detail.address}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>提报开始时间</div>
              </el-col>
              <el-col :span='12'><span>{{detail.startTime}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>提报结束时间</div>
              </el-col>
              <el-col :span='12'><span>{{detail.endTime}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row> <el-row :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>提报开始时间</div>
              </el-col>
              <el-col :span='12'><span>{{detail.startTime}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span='12'>
                <div>提报结束时间</div>
              </el-col>
              <el-col :span='12'><span>{{detail.endTime}}</span></el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
           <el-row >
             <el-col :span='12'>
               <div>采购类型</div>
             </el-col>
             <el-col :span='12'><span>{{type.name}}</span></el-col>
           </el-row>
          </el-col>

          <el-col :span="8">
          </el-col>
        </el-row>
      </div>
      <div class="box-tit">已录商品（已下单{{submitProdCount}}个 ，待下单{{submitCount}}个， 预计金额：￥{{  completeProdTotalAmount}} 实付金额：￥{{submitProdTotalAmount}}  ）</div>
      <el-table :data="cpProdInfos" style="width: 100%">
        <el-table-column prop="prodName" label="商品名称" width="200">
        </el-table-column>
        <el-table-column prop="prodId" label="商品编号" width="150">
        </el-table-column>
        <el-table-column prop="basketCount" label="数量">
        </el-table-column>
        <el-table-column prop="status" label="下单状态">
          <template slot-scope='scope'>
            <span v-if='scope.row.status==1'>未下单</span>
            <span v-if='scope.row.status==2'>已下单</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单编号">
        </el-table-column>
        <el-table-column prop="price" label="价格">
        </el-table-column>
      </el-table>
      <div class="box-tit">提报人（已提报{{submitCount}}个 ，未提报{{notSubmitCount}}个 ）</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="联系方式" width="180">
        </el-table-column>
        <el-table-column prop="department" label="部门">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope='scope'>
            <span v-if='scope.row.status==0'>未提报</span>
            <span v-if='scope.row.status==1'>已提报</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dialogFormVisible: false,
        tableData: [],
        detail: {},
        type: {},
        notSubmitCount: 0,
        submitCount: 0,
        completeProdCount:0,
        completeProdTotalAmount:0,
        cpProdInfos:[],
        submitProdCount:0,
        submitProdTotalAmount:0
      }
    },
    props: {
      id: {
        type: String
      }

    },
    activated(){
      // console.log('mounted')
      // // 获取清单详情
      // this.id = this.$route.query.id
      // this.getDetail(this.id)
      // // 获取采购类型
      // this.getType()
      // // 获取提报人先洗数据
      // this.getTb()
      // //获取提报商品
      // this.getTbSp()
    },

    methods: {

       //获取提报商品
       getTbSp(){
         this.$http({
           url: this.$http.adornUrl('/platform/cp/cpProdInfoAndCount?cpId='+this.id),
           method: 'get',
           data: {

           }
         }).then(({ data }) => {
            this.completeProdCount=data.completeProdCount
            this.completeProdTotalAmount=data.completeProdTotalAmount
            this.cpProdInfos=data.cpProdInfos
            this.submitProdCount=data.submitProdCount
            this.submitProdTotalAmount=data.submitProdTotalAmount
         })
       },
       // 获取提报人先洗数据
      getTb () {
        this.$http({
          url: this.$http.adornUrl('/platform/cp/' + this.id + '/spInfoAndCount'),
          method: 'get',
          data: {}
        }).then(({ data }) => {
           this.notSubmitCount=data.notSubmitCount
           this.submitCount=data.submitCount
           this.tableData=data.cpSubmitPersonInfoAndSubmitStatusList
        })
      },
      aa () {
        this.dialogFormVisible=true
        // 获取清单详情
        // this.id = this.$route.query.id
        this.getDetail(this.id)
        // 获取采购类型
        this.getType()
        // 获取提报人先洗数据
        this.getTb()
        //获取提报商品
        this.getTbSp()
      },
      // 获取采购类型
      getType () {
        this.$http({
          url:this.$http.adornUrl('/platform/cp/type/info') ,
          method: 'get',
          data: this.$http.adornData({})
        }).then(({ data }) => {
           this.type = data[0]
        })
      },
      // 获取清单详情
      getDetail (id) {
        this.$http({
          url:this.$http.adornUrl('/platform/cp/info/'+id) ,
          method: 'get',
          data: {}
        }).then(({ data }) => {
           this.detail = data
        })
      },
    }
  }
</script>

<style >
  .des-top {
    font-size: 14px;

  }

  .des-top .el-row {
    margin: 10px;
  }
  .box-tit {
        font-size: 16px;
        font-weight: bold;
        margin: 24px;
  }
</style>
